const pageTitle = require('./src/settings.js').title;
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const HtmlPrettyConsoleWebpackPlugin = require('html-pretty-console-webpack-plugin');
const moment = require('moment');

const childProcess = require('child_process');
// const branch = childProcess.execSync('git rev-parse --abbrev-ref HEAD').toString().replace(/\s+/, '');
const branch = 'dev';

const isProduction = process.env.NODE_ENV === 'production';

const imgcdn = 'https://oss.xx.com/img';

const cdn = {
  externals: {
    axios: 'axios',
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'element-ui': 'ELEMENT'
  },

  js: [
    'js/axios@0.24.0.min.js',
    'js/vue@2.6.14.min.js',
    'js/vue-router@3.5.3.min.js',
    'js/vuex@3.6.2.min.js',
    'js/element-ui@2.15.6.min.js'

  ]
};

console.info(`
# 环境：${process.env.NODE_ENV}
# 分支：${branch}
# 时间：${moment().format('YYYY-MM-DD HH:mm:ss')}
`);

module.exports = {
  lintOnSave: false,
  publicPath: './',
  productionSourceMap: process.env.NODE_ENV !== 'production',
  outputDir: `vsweb_${process.env.NODE_ENV}_${branch}_${moment().format('YYYYMMDDHHmm')}`,
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/common.scss";`
      }
    }
  },
  configureWebpack: config => {
    config.name = pageTitle;

    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf('scss') !== -1;
    })
    .forEach(item => {
      item.oneOf.forEach(oneOfRule => {
        oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,
          { loader: require.resolve('./css-unicode-loader') });
      });
    });
    config.plugins.push(new webpack.optimize.MinChunkSizePlugin({
      minChunkSize: 5000
    }));
    config.plugins.push(new HtmlPrettyConsoleWebpackPlugin({
      output: [
        { label: '打包环境', value: process.env.NODE_ENV },
        { label: '打包时间', value: moment().format('YYYY-MM-DD HH:mm:ss') },
        { label: '分支信息', value: branch }
      ]
   }));

    config.externals = cdn.externals;

    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        /* [file]被替换为原始资产文件名。
           [path]替换为原始资产的路径。
           [dir]替换为原始资产的目录。
           [name]被替换为原始资产的文件名。
           [ext]替换为原始资产的扩展名。
           [query]被查询替换。 */
        filename: '[path][name][ext].gz[query]',
        algorithm: 'gzip',
        test: /\.(html|js|css)$/i,
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false // 删除原文件
      }));
    }
  },

  devServer: {
    // host: 'localhost.gtja.com',
    port: 8880,
    proxy: {
      '/vintexfund': {
        target: 'http://10.184.32.199:8013', // 测试环境
        // target: 'http://vintexuatadmin.gtja.com:8013', // uat环境
        changeOrigin: true
      },
      '/cos': {
        target: 'http://vintexadmin.gtja.com:8013',
        changeOrigin: true
      }
    }
  },
  chainWebpack (config) {
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ]);

    config.plugins.delete('prefetch');

    config.plugin('html').tap(args => {
      args[0].cdn = cdn;
      return args;
    });

    config
      .module
      .rule('images')
      .test(/\.(jpeg|jpg|png|gif)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        // 小于 10k 的图片进行 base64 编码，大于等于 10k 的图片则进行单独的打包
        // limit: 10240,

        publicPath: isProduction ? imgcdn : './',

        // 配置打包后图片文件名
        name: 'img/[name].[ext]'
      })
      .end();
  }
};
